//获取操作对象
var box=document.querySelector('.pro-info')
var imglf=document.querySelector(".leftBox")
var imgri=document.querySelector(".rightBox")

//获取url地址栏中的参数
var search=location.search
var url = location.href


//参数1
//获取当前账号
var name1=getCookie('name')

//存放当前商品信息的对象
var o1 
//判断当前search是否有值
if(search){
    //获取当前参数的值
    var id=search.split('=')[1];
   //丽丽
    //使用async和await去服务端获取当前id所对应的数据
    (async function(){
        var txt=await PromiseAjax({
            url:"./php/xianqye.php",
            data:"uid="+id
            
        })
        //把当前字符串转为对象
        o1=eval('('+txt+')')      
      
        var  ert=`
        <img src="${o1.src}" alt="">
        <div class="mark"></div>
        `
        imglf.innerHTML=ert
        var ert2=`
        <img src="${o1.src}" alt="" class='rightimg'> 
        `
        imgri.innerHTML=ert2
        //创建字符串，存放需要渲染的内容
        var str=`
        
        <div class="pro-info">
        <p class="pro-bard"><strong>TRENDIANO</strong></p>
        <h2>
            【一件七折】花朵刺绣印花无帽卫衣 <em>3254nbs584</em>
        </h2>
        <p class="pro-price">${o1.price}</p>
        <dl class="pro-optin">
            <dt>颜色；</dt>
            <dd>
                <button>黑色</button>
                <button>白色</button>
            </dd>
        </dl>
        <dl class="pro-siez">
            <dt>尺码；</dt>
            <dd>
                <a>S</a>
                <a>M</a>
                <a>L</a>
                <a>XL</a>
                <a>XXL</a>
            </dd>
        </dl>
        <P class="pro-btnbox">
            <button type="button" class="btn-one">一键购买</button>
            <button class="btn-tue">加入收藏</button>
            <a>联系客服</a>
        </P>
        <a>单笔满699免运费</a>
        <button type="button" class="btn-add"><a class="btn-a" href="./gowc.html">加入购物车</a></button>
        <p class="bunle">分享；
            <button> </button>
        </p>
    </div>
</div>
</div>
        `
        //把当前拼接好的内容，渲染到大盒子中
        box.innerHTML=str



        var leftBox=document.querySelector(".leftBox")
        var mark=document.querySelector('.mark')
        var rightBox=document.querySelector(".rightBox")
        var rightImg=document.querySelector('.rightimg')
       //  var lis=document.querySelectorAll("li")
       
        //给左边盒子绑定事件
        leftBox.onmouseover=function(){
            //显示蒙版层和右边盒子
            mark.style.display='block'
            rightBox.style.display='block'
        }
        leftBox.onmouseout=function(){
            //隐藏蒙版层和右边盒子
            mark.style.display='none'
            rightBox.style.display='none'
        }
        leftBox.onmousemove=function(e){
            //兼容事件对象
            var  e = e || window.event
            //获取蒙版层的移动距离
            var left1=e.pageX-leftBox.offsetLeft-parseInt(mark.offsetWidth/4)-400
            var top1=e.pageY-leftBox.offsetTop-parseInt(mark.offsetHeight/4)-300
            //给蒙版层设置边界
            var maxX=leftBox.offsetWidth-mark.offsetWidth
            var maxY=leftBox.offsetHeight-mark.offsetHeight
            //右边图片的移动距离
            var imgX,imgY
            //判断水平方向
            if(left1<=0){
                mark.style.left="0px"
                imgX=0
            }else if(left1>=maxX){
                mark.style.left=maxX+'px'
                imgX=maxX
            }else{
                mark.style.left=left1+'px'
                imgX=left1
            }
       
            //垂直方向
            if(top1<=0){
                mark.style.top="0px"
                imgY=0
            }else if(top1>=maxY){
                mark.style.top=maxY+'px'
                imgY=maxY
            }else{
                mark.style.top=top1+'px'
                imgY=top1
            }
       
            //移动右边的图片
            rightImg.style.left=-2*imgX+'px'
            rightImg.style.top=-2*imgY+'px'
        }





    })()
}else{
    alert("非法进入,请先登录")
    location='./den.html'
}

//第二个事件
//给大盒子对象绑定点击事件
box.onclick=function(e){
    
    //事件对象兼容
    var e = e || window.event
    //获取操作目标
    var tg=e.target || e.srcElement
    //判断当前点击的按钮是否为“加入购物车”
    if(tg.className=='btn-a'){
        //判断当前name1是否有值
        if(name1){
            //获取该账号在localStorage中存储的商品信息
            var lists=localStorage.getItem(name1) || "[]"
            //把当前获取的内容，转为数组对象
            lists=eval('('+lists+')')
            //判断当前数组中是否有元素
            if(lists.length>0){
                //设置开关判断，true表示该商品存在，false表示不存在
                var bool=false
                //遍历数组元素
                lists.forEach(item=>{
                    //判断数组中的商品id是否等于当前添加的商品id
                    if(o1.id==item.id){
                        //直接修改当前商品的数量
                        item.number++
                       
                        bool=true
                    }
                })
            
                if(bool){
                    //把当前数组存放到localStorage中
                    localStorage.setItem(name1,JSON.stringify(lists))
              }else{
                   //修改当前商品的数量
                    o1['number']=1
                    //直接把当前要添加的商品存放到数组
                    lists.push(o1)
                    //把当前数组存放到localStorage中
                    localStorage.setItem(name1,JSON.stringify(lists)) 
                }
                
            }else{
                //修改当前商品的数量
                o1['number']=1
                //直接把当前要添加的商品存放到数组
                lists.push(o1)
                //把当前数组存放到localStorage中
                localStorage.setItem(name1,JSON.stringify(lists))
            }
        

        }else{
            alert("你还未登录")
            //获取当前url
            var url=location.href
            
            //跳转到登录页
            location=`./den.html?iul=${url}`
        }
    }

}
function fn1(){
    //获取左边大盒子
    var rightImg=document.querySelector("body > div.detail > div > div.proimg > div.leftBox > div")
    

}

var box2 = document.querySelector('.div2')
//创建结构函数，生成tab选项卡
function Tab(ele) {
    this.lis = ele.querySelectorAll('li')
    this.ps = ele.querySelectorAll('p')
}
//给当前构造函数的原型空间添加操作方法
Tab.prototype.init = function () {
    for (let i = 0; i < this.lis.length; i++) {
        this.lis[i].onclick = () => {
            for (let j = 0; j < this.lis.length; j++) {
                this.lis[j].className = ""
                this.ps[j].className = ""
     }
            this.lis[i].className = 'bg'
            this.ps[i].className = 'show'
        }
    }
}  
//创建实例化对象 调用
var t2 = new Tab(box2)
t2.init()